<template>
  <u-number-box v-model="inputVal" step="1" :min="0" :showMinus="inputVal > 0">
    <view slot="minus" :class="isDark ? 'op-6' : 'op-2'">
      <u-icon name="minus-circle-fill" :size="size"></u-icon>
    </view>
    <text
      v-show="inputVal > 0"
      slot="input"
      style="width: 28px"
      class="ta-c fz-14 op-7"
      >{{ inputVal }}</text
    >
    <view slot="plus" @click="onAdd">
      <u-icon
        :name="inputVal > 0 ? 'plus-circle' : 'plus-circle-fill'"
        :size="size"
        color="#f51"
      ></u-icon>
    </view>
  </u-number-box>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    value: null,
    size: {
      type: Number,
      default: 20,
    },
  },
  computed: {
    ...mapState(["isDark"]),
  },
  data() {
    return {
      inputVal: this.value || 0,
    };
  },
  watch: {
    value(val) {
      this.inputVal = val;
    },
    inputVal(val) {
      if (val != this.value) {
        this.$emit("change", val);
      }
      this.$emit("input", val);
    },
  },
  methods: {
    async onAdd(e) {
      uni.$emit("cart-anim", {
        x: e.currentTarget.offsetLeft,
        y: e.currentTarget.offsetTop,
      });
    },
  },
};
</script>
